<template>
  <div>
    <div style="width: 100%;height:1024px; background-color: white;">
      <el-row style="font-size: 14px; color:gray;padding-top:20px;">
        <el-col :span="4">
          <div :class="['add-addr-btn']" @click="handleNewAddressClick">新增收货地址</div>
        </el-col>
        <el-col :span="16">
          <span>您已创建{{addressList.length}}个收货地址,最多可创建{{maxAddressCount}}个</span>
        </el-col>
      </el-row>
      <el-row>
        <el-row
          style="border:1px solid #eeeeee; margin-bottom: 10px;padding: 20px;"
          v-for="addr of addressList" :key="addr.id">
          <el-row>
            <el-col :span="2" style="text-align: left;padding-bottom: 20px;"><span
              style="font-size: 18px;font-weight: bolder;">{{addr.shippingUser}}</span></el-col>
            <el-col :span="1" style="text-align: left;padding-bottom: 20px;">
              <i class="el-icon-edit"></i>
            </el-col>
            <el-col :span="2" v-if="addr.isDefault==1">
              <span style="background-color:rgb(243,174,89);color: white;padding:5px;font-size: 14px;border-radius: 2px;">默认地址</span>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="2" style="text-align: right;padding-right:20px;color:gray; font-size: 14px;">收货人:</el-col>
            <el-col :span="14" style="text-align: left;">{{addr.shippingUser}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="2" style="text-align: right;padding-right:20px;color:gray; font-size: 14px;">所在地区:</el-col>
            <el-col :span="14" style="text-align: left;font-size: 14px;">
              {{addr.province}}{{addr.city}}{{addr.district}}
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="2" style="text-align: right;padding-right:20px;color:gray; font-size: 14px;">地址:</el-col>
            <el-col :span="14" style="text-align: left;">{{addr.address}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="2" style="text-align: right;padding-right:20px;color:gray; font-size: 14px;">手机:</el-col>
            <el-col :span="14" style="text-align: left;">{{addr.shippingPhone}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="2" style="float: right;color: rgb(107,144,191);font-size: 12px;">
              <span style="cursor: pointer;margin-right:10px;" @click="handleSetDefault(addr)">设为默认</span>
              <span style="cursor: pointer;" @click="handleEditClick(addr)">编辑</span>
            </el-col>
          </el-row>
        </el-row>
      </el-row>
    </div>

    <el-dialog
      title="新增收货地址"
      :visible.sync="newAddressDialogVisible"
      width="30%"
      center>
      <el-form>
        <el-form-item label="收货人姓名:">
          <el-input v-model="newAddress.shippingUser"></el-input>
        </el-form-item>
        <el-form-item label="收货人联系电话:">
          <el-input v-model="newAddress.shippingPhone"></el-input>
        </el-form-item>
        <el-form-item label="选择地址:">
          <el-cascader
            size="large"
            :options="options"
            v-model="selectedOptions"
            @change="handleChange"
          >
          </el-cascader>
        </el-form-item>
        <el-form-item label="详情地址门牌号:">
          <el-input v-model="newAddress.address"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleSaveNewAddress">保存收货地址</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="编辑收货地址"
      :visible.sync="updateAddressDialogVisible"
      width="30%"
      center>
      <el-form>
        <el-form-item label="收货人姓名:">
          <el-input v-model="updateAddress.shippingUser"></el-input>
        </el-form-item>
        <el-form-item label="收货人联系电话:">
          <el-input v-model="updateAddress.shippingPhone"></el-input>
        </el-form-item>
        <el-form-item label="选择地址:">
          <el-cascader
            size="large"
            :options="options"
            v-model="updateSelectedOptions"
            @change="handleUpdateChange"
          >
          </el-cascader>
        </el-form-item>
        <el-form-item label="详情地址门牌号:">
          <el-input v-model="updateAddress.address"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleSaveUpdateAddress">保存收货地址</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

  import {regionDataPlus, CodeToText,TextToCode} from 'element-china-area-data'
  import {mapState} from 'vuex'

  export default {
    name: "Shipping",
    data() {
      return {
        maxAddressCount:25,
        newAddress: {
          customerId: '',
          shippingUser: '张三',
          shippingPhone: '13838384848',
          zip: '413406',
          province: '',
          city: '',
          district: '',
          address: '某某小区2号楼2单元1502'
        },
        newAddressDialogVisible: false,
        options: regionDataPlus,
        selectedOptions: [],
        addressList: [],

        updateAddress: {
          customerId: '',
          id:0,
          shippingUser: '',
          shippingPhone: '',
          zip: '',
          province: '',
          city: '',
          district: '',
          address: ''
        },
        updateSelectedOptions:[],
        updateAddressDialogVisible:false
      }
    },
    created() {
      this.newAddress.customerId = this.$store.state.auth.user.id;
      this.api.__api__CustomerShippingAddrs(this.$store.state.auth.user.id)
        .then(data => {
          this.addressList = data.data;
        }).catch(error => null)
    },
    computed: {
      ...mapState({
        user: state => state.auth.user
      })
    },
    methods: {
      handleNewAddressClick() {

        if(this.addressList.length>=this.maxAddressCount){
          this.$message.info("你已经创建了"+this.maxAddressCount+"个地址，请删除至少一个才能添加!");
          return;
        }
        this.newAddressDialogVisible = true;
      },

      handleChange(value) {
        console.log("sel="+JSON.stringify(this.selectedOptions))
        this.newAddress.province = CodeToText[value[0]];
        this.newAddress.city = CodeToText[value[1]];
        this.newAddress.district = CodeToText[value[2]];

      },

      handleSaveNewAddress() {
        this.api.__api__CustomerShippingAddrAdd(this.newAddress)
          .then(data => {
            this.addressList = data.data;
            this.newAddressDialogVisible = false;
          }).catch(error => null)
      },
      handleSetDefault(addr){
        this.api.__api__CustomerShippingAddrSetDefault(this.user.id,addr.id)
          .then(data => {
            this.addressList = data.data;
          }).catch(error=>null)
      },
      handleEditClick(addr){
        this.updateAddress = JSON.parse(JSON.stringify(addr));
        this.updateSelectedOptions.length=0;
        this.updateSelectedOptions.push(TextToCode[addr.province]);
        this.updateSelectedOptions.push(TextToCode[addr.city]);
        this.updateSelectedOptions.push(TextToCode[addr.district]);
        this.updateAddressDialogVisible = true;
      },

      handleUpdateChange(value) {
        this.updateAddress.province = CodeToText[value[0]];
        this.updateAddress.city = CodeToText[value[1]];
        this.updateAddress.district = CodeToText[value[2]];

      },

      handleSaveUpdateAddress(){
        this.api.__api__CustomerShippingAddrUpdate(this.updateAddress)
          .then(data => {
            this.addressList = data.data;
            this.updateAddressDialogVisible = false;
          }).catch(error=>null)

      }
    }
  }
</script>

<style scoped>

  .add-addr-btn {
    border: 1px solid lightblue;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
    background-color: beige;
    cursor: pointer;
  }
</style>
